<template>
  <div>
    <div>
      <GradeSelect v-model="grade_id" @clear="handleClear" @change="handleGradeChange" />
      <!--      <el-button type="primary" @click="go()">导出报告</el-button>-->
    </div>
    <StatisticsItem
      :mode="compositeModel.mode"
      title="1、完成情况"
      subtitle=""
      @total="handleCompositeTotal"
      @page="handleCompositePage"
      @view="()=>{
        this.$router.push({
          name: 'statistics-course-complete'
        })
      }"
    >
      <div slot="graph">
        <CirclePie ref="composite" cid="1" :data="composite" />
      </div>
    </StatisticsItem>
    <!--    <StatisticsItem-->
    <!--      title="2、意向专业选择排名"-->
    <!--      subtitle="反映学生选择意向专业排名情况，用于了解学生对更全面意向专业的选择热度，更准确对接相关院校"-->
    <!--      @view="()=>{-->
    <!--        this.$router.push({-->
    <!--          name: 'statistics-course-intention'-->
    <!--        })-->
    <!--      }"-->
    <!--    >-->
    <!--      <div slot="graph">-->
    <!--        <BarYCategoryStack cid="1" :y-data="worth" name="职业价值观测试" />-->
    <!--        <BarYCategoryStack cid="2" :y-data="character" name="MBTI性格测试" />-->
    <!--        <BarYCategoryStack cid="3" :y-data="intelligence" name="多元智能测试" />-->
    <!--        <BarYCategoryStack cid="4" :y-data="grown" name="成长环境测试" />-->
    <!--        <BarYCategoryStack cid="5" :y-data="interest" name="职业兴趣测试" />-->
    <!--      </div>-->
    <!--    </StatisticsItem>-->
    <StatisticsItem
      title="2、优势科目人数比"
      :mode="subjectRatioModel.mode"
      subtitle="反映高一学生在优势学科自评后的排前三各学科人数占比，用于了解优势科目的人员结构。"
      @total="handleSubjectRatio"
      @page="handleSubjectRatioPage"
      @view="()=>{
        this.$router.push({
          name: 'statistics-course-advantage'
        })
      }"
    >
      <div slot="graph">
        <XkSubjectRatio cid="1" :data="subjectRatioData[0]" :opacity="0.7" title="第一优势科目" />
        <XkSubjectRatio cid="2" :data="subjectRatioData[1]" :opacity="0.7" title="第二优势科目" />
        <XkSubjectRatio cid="3" :data="subjectRatioData[2]" :opacity="0.7" title="第三优势科目" />
      </div>
    </StatisticsItem>
    <!--    <StatisticsItem-->
    <!--      title="4、最佳选课方案排名"-->
    <!--      subtitle="反映高一学生优势科目自评或自主选择后，再加入更精准影响因素而生成的最佳选课组合排行，用于了解他们的选课意向热度。"-->
    <!--      @view="()=>{-->
    <!--        this.$router.push({-->
    <!--          name: 'statistics-course-best'-->
    <!--        })-->
    <!--      }"-->
    <!--    >-->
    <!--      <div slot="graph" v-loading="loadingComposite">-->
    <!--        <CirclePie ref="composite" cid="1" :data="composite" />-->
    <!--      </div>-->
    <!--    </StatisticsItem>-->
    <StatisticsItem
      title="3、科目资源投放排序建议"
      :show="false"
      :totalshow="false"
      subtitle="根据最佳选课方案，测算科目资源投放优先排行，用于优化师资结构，进行合理配置分班资源的依据。"
      @view="()=>{
        this.$router.push({
          name: 'statistics-ranking-strategy'
        })
      }"
    >
      <div slot="graph">
        <LinearGradientBar cid="2" :data="resourceData" :opacity="0.7" />
      </div>
    </StatisticsItem>
  </div>
</template>

<style scoped>
  h2>span {
    color: #8c939d;
    font-size: 12px;
  }
</style>

<script>
import CirclePie from '../../components/Chart/CirclePie'
// import BarYCategoryStack from '../../components/Chart/BarYCategoryStack'
import LinearGradientBar from '../../components/Chart/LinearGradientBar'
import StatisticsItem from './components/statistics-item'
import GradeSelect from './components/grade-select'
import XkSubjectRatio from './charts/XkSubjectRatio'
import { getXkComposite, getXkResourceThrow, getXkSubjectRatio } from '../../api/statistics'

export default {
  components: {
    LinearGradientBar: LinearGradientBar,
    GradeSelect: GradeSelect,
    CirclePie: CirclePie,
    StatisticsItem: StatisticsItem,
    XkSubjectRatio: XkSubjectRatio
    // BarYCategoryStack: BarYCategoryStack
  },
  data() {
    return {
      loadingComposite: true,
      resourceData: [],
      subjectRatioData: [],
      grade_id: '',
      class_name: '',
      composite: [],
      interest: [],
      worth: [],
      intelligence: [],
      grown: [],
      character: [],
      subjectRatioModel: {
        mode: false
      },
      compositeModel: {
        mode: false
      }
    }
  },
  mounted() {
    this.getComposite()
    this.getXkResourceThrow()
    this.getXkSubjectRatio()
  },
  methods: {
    handleGradeChange(value) {
      if (parseInt(value) > 0) {
        this.grade_id = value
        console.log('grade1', value)
        this.compositeModel.mode = false
        this.subjectRatioModel.mode = false
        this.getComposite({
          grade_id: this.grade_id
        })
        this.getXkSubjectRatio({
          grade_id: this.grade_id
        })
      }
    },
    handleClear() {
      console.log('clear')
      this.grade_id = ''
      this.compositeModel.mode = false
      this.subjectRatioModel.mode = false
      this.getComposite()
      this.getXkSubjectRatio()
    },
    handleCompositeTotal() {
      if (!this.grade_id) {
        this.$message.warning('请选择年级')
        return
      }
      this.compositeModel.mode = !this.compositeModel.mode
      if (this.subjectRatioModel.mode) {
        this.handleCompositePage(1)
      } else {
        this.getComposite()
      }
    },
    handleCompositePage(page) {
      this.getComposite({
        grade_id: this.grade_id,
        class_name: page + '班'
      })
    },
    getComposite(params) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return getXkComposite(params).then((res) => {
        this.composite = res.schemes
      }).finally(() => {
        loading.close()
      })
    },
    getXkResourceThrow(params) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return getXkResourceThrow(params).then(res => {
        this.resourceData = res
      }).finally(() => {
        loading.close()
      })
    },
    handleSubjectRatio() {
      if (!this.grade_id) {
        this.$message.warning('请选择年级')
        return
      }
      this.subjectRatioModel.mode = !this.subjectRatioModel.mode
      if (this.subjectRatioModel.mode) {
        this.handleSubjectRatioPage(1)
      } else {
        this.getXkSubjectRatio()
      }
    },
    handleSubjectRatioPage(page) {
      this.getXkSubjectRatio({
        grade_id: this.grade_id,
        class_name: page + '班'
      })
    },
    getXkSubjectRatio(params) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return getXkSubjectRatio(params).then(res => {
        this.subjectRatioData = res.map((v) => {
          return [
            v['生物'],
            v['物理'],
            v['化学'],
            v['地理'],
            v['政治'],
            v['历史']
          ]
        })
      }).finally(() => {
        loading.close()
      })
    },
    go() {
      this.$router.push('/statistics/career/complex')
    }
  }
}
</script>
